<template>
  <div style="display: inline-block;margin-right: 5px;">
    <Modal v-model="modal1"
           title="修改"
           ok-text="提交"
           :loading="loading"
           @on-ok="handleSubmit('formValidate')">
      <Form ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="80">
        <FormItem label="发布时间">
          <DatePicker type="datetime"
                      class="date-picker"
                      v-model="formValidate.releasetime"
                      placeholder="发布时间"
                      @on-change="timeChange"></DatePicker>
        </FormItem>
        <FormItem label="消息内容"
                  prop="content">
          <Input v-model="formValidate.content"
                 type="textarea"
                 placeholder="请输入消息内容" />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'edit',
  data () {
    return {
      modal1: false,
      loading: true,
      formValidate: {
        releasetime: '',
        content: ''
      },
      ruleValidate: {
        content: [
          { required: true, message: '消息内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.modal1 = false
      this.loading = true
      this.formValidate.releasetime = ''
      this.formValidate.content = ''
      this.handleReset('formValidate')
    },
    getItem (data) {
      this.handleReset('formValidate')
      this.formValidate.releasetime = data.releasetime
      this.formValidate.content = data.newscontent
      this.modal1 = true
    },
    timeChange (time, timetype) {
      this.formValidate.releasetime = time
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.modal1 = false
          this.loading = true
          this.$Message.info('修改成功!')
        } else {
          this.modal1 = true
          this.loading = false
          this.$Message.info('修改失败!')
        }
      })
    },
    // 重置表单
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
